<template>
  <div id='tmpl'>
    <div class="silder">
      <silder :url='url'></silder>
    </div>

    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市场价: <s>￥{{info.market_price}}</s>    销售价：<span>￥{{info.sell_price}}</span>
        </li>
        <li class="inputli">
          购买数量：<inputNumber v-on:dataObj="getCount" class="inputNumber"></inputNumber>
          <transition name="show"
					 @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
					>
						<div v-if="isshow" class="ball"></div>
					</transition>
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
        </li>
      </ul>
    </div>

    <div id="other">
			<router-link v-bind="{to:'/goods/goodsdesc/'+id}">
			  <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
			</router-link>
      <router-link v-bind="{to:'/goods/goodscomment/'+id}">
			  <mt-button type="danger" size="large">商品评论</mt-button>
      </router-link>
		</div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';

import silder from '../subcom/silder.vue';
import inputNumber from '../subcom/inputNumber.vue';
import {vm,ZMCOUNT} from '../../kits/vm.js'
import {setItem,valueObj} from '../../kits/localSg.js'
export default {
  components:{silder,inputNumber},
  data () {
    return {
      id:0,
      url:'',
      info:{},
      inputNumberCount:1,
      isshow:false
    }
  },
  created(){
    this.id = this.$route.params.id;
    this.url = this.$common.apidomain+  '/api/getthumimages/'+this.id;
    // console.log(this.id);
    this.getinfo();

  },
  methods:{
      toshopcar(){
        vm.$emit(ZMCOUNT,this.inputNumberCount);

        valueObj.goodsid = this.id;
        valueObj.count = this.inputNumberCount;
        setItem(valueObj);

        
        this.isshow = !this.isshow;
      },
            // 1.0 获取商品详细描述
			getinfo(){
				var url = this.$common.apidomain +'/api/goods/getinfo/'+this.id;
        console.log(url)
				this.$http.get(url).then(function(res){
					//判断状态
          var body = res.body;
					if(body.status != 0 ){
						// Toast(body.message);
						return;
					}
					this.info =res.body.message[0];
				});
			},
      getCount(count){
				this.inputNumberCount = count;
			},
      beforeEnter(el){
        el.style.transform = "translate(0px,0px)";
      },
      enter(el,done){
        el.offsetWidth;

        el.style.transform = "translate(75px,366px)";


        done();
      },
      afterEnter(el){

        this.isshow = !this.isshow;
      }
  }
}
</script>
<style lang="css" scoped>
.silder{
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 5px;
  margin: 5px;
}

#buy,#params,#other
{
    margin: 5px;
    padding: 5px;
    border:1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
}
.line{
    height: 1px;
    border: 1px solid rgba(0,0,0,0.2);
}
#buy ul,#params ul{
    padding-left: 0px;
}
 #buy h4{
	 color:#0094ff;
	padding: 5px;
 }
 #buy li,#params li{
	 list-style: none;
	 padding: 8px;
 }

#buy .price span{
    color:red;
}

#other .imgdesc{
    margin-bottom: 20px;
}
.inputli{
    position: relative;
}
.inputNumber{
    position: absolute;
    left:100px;
    top:5px;
}

.ball{
	background-color: red;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	position: absolute;
	left:150px;
	top:10px;
	transition: all 0.4s ease;
	z-index: 100;
}
</style>